<template>
  <view class="content">
    <MsgBox ref="msgBox"></MsgBox>

    <view class="tips" v-show="showTips">
      <image src="./../../static/todoTips.png" mode="aspectFill" />
      <button @click="closeTips()">关闭</button>
    </view>

    <image src="/static/DDL.jpg" mode="aspectFill" class="ddl" />
    <view class="titlebox">
      <view class="title">
        <view class="slogan">how dare you sleep!</view>
        <view class="new" @click="showPop = true">
          <image src="/static/add.png" class="plus" />
        </view>
      </view>
    </view>
    <image
      class="addTodo"
      src="./../../static/addTodo.png"
      mode="aspectFit"
      v-show="lists.length == 0 && !addTodoFirstLoad"
    ></image>
    <!--*************新建弹窗****************-->
    <modal
      v-if="showPop"
      title="新建待办"
      confirm-text="确定"
      cancel-text="取消"
      @cancel="cancelPop"
      @confirm="confirmPop"
    >
      <input type="text" placeholder="添加事项..." v-model="contentPop" />
      <!-- <textarea name="text" ref="v-textarea" v-model="contentPop" class="newedit" placeholder="添加事项..." style="textHeight()"></textarea> -->
    </modal>
    <!--*************新建弹窗****************-->
    <view class="list">
      <!--*************红色紧急事件****************-->
      <ul>
        <li
          class="li_vessel"
          v-for="(item, index) in lists"
          v-show="item.ispriority == 10"
          :key="index"
          ref="liii"
        >
          <view class="sum">
            <view
              class="lists red"
              :style="{
                transform:
                  item.ifLeft == true
                    ? 'translateX(-250rpx)'
                    : 'translateX(0rpx)',
              }"
              ref="listItems"
              :id="index"
              @touchstart="touchStart"
              @touchend="touchEnd"
            >
              <view class="big-circle">
                <view
                  class="little-circle"
                  @click="changeReady(item)"
                  :style="litcircle"
                >
                </view>
              </view>
              <view class="item" @longpress="pressEdit(item, index)">
                {{ item.text }}
              </view>
              <view class="time-data">
                {{ item.dad }}
              </view>
            </view>
            <!--*************编辑弹窗****************-->
            <modal
              v-if="ifnum == index"
              title="编辑事项"
              confirm-text="确定"
              cancel-text="取消"
              @cancel="cancelEdit(item)"
              @confirm="confirmEdit(item)"
            >
              <input
                type="text"
                placeholder="修改内容..."
                v-model="item.text"
              />
            </modal>
            <!--*************编辑弹窗****************-->
            <!--*************红色紧急事件****************-->
            <!--*************换色****************-->
            <view class="btn-box" ref="btn">
              <view class="changeco">
                <view class="btn color red" @click="ifChangeshow(item)">
                  <view class="smallcolor"></view>
                </view>
                <view class="white-circle" v-if="item.ifChange">
                  <view class="jian"></view>
                  <view class="red-circle" @click="changeRed(item)">
                    <view class="red-red-circle"></view>
                  </view>
                  <view class="yellow-circle" @click="changeYellow(item)">
                    <view class="yellow-yellow-circle"></view>
                  </view>
                  <view class="blue-circle" @click="changeBlue(item)">
                    <view class="blue-blue-circle"></view>
                  </view>
                </view>
              </view>
              <view class="btn time">
                <uni-datetime-picker
                  type="datetime"
                  v-model="item.dad"
                  class="time-picker"
                  @change="(e) => timePut(e, item)"
                >
                  <image src="/static/time.png" alt="" class="time" />
                </uni-datetime-picker>
              </view>
              <!-- </picker> -->
              <view class="btn delete">
                <image
                  src="/static/close.png"
                  class="delete"
                  @click="isDelete(item, index)"
                />
              </view>
            </view>
          </view>
        </li>
      </ul>
    </view>
    <!--*************黄色事件****************-->
    <view class="list">
      <ul>
        <li
          class="li_vessel"
          v-for="(item, index) in lists"
          v-show="item.ispriority == 9"
          :key="index"
        >
          <view class="sum">
            <view
              class="lists yellow"
              :id="index"
              :style="{
                transform:
                  item.ifLeft == true
                    ? 'translateX(-260rpx)'
                    : 'translateX(0rpx)',
              }"
              ref="listItems"
              @touchstart="touchStart"
              @touchend="touchEnd"
            >
              <view class="big-circle">
                <view
                  class="little-circle"
                  @click="changeReady(item)"
                  :style="litcircle"
                >
                </view>
              </view>
              <view class="item" @longpress="pressEdit(item, index)">
                {{ item.text }}
              </view>
              <view class="time-data">
                {{ item.dad }}
              </view>
            </view>
            <!--*************编辑弹窗****************-->
            <modal
              v-if="ifnum == index"
              title="编辑事项"
              confirm-text="确定"
              cancel-text="取消"
              @cancel="cancelEdit(item)"
              @confirm="confirmEdit(item)"
            >
              <input
                type="text"
                placeholder="修改内容..."
                v-model="item.text"
              />
            </modal>
            <!--*************编辑弹窗****************-->
            <!--*************换色****************-->
            <view class="btn-box">
              <view class="changeco">
                <view class="btn color yellow" @click="ifChangeshow(item)">
                  <view class="smallcolor"></view>
                </view>
                <view class="white-circle" v-if="item.ifChange">
                  <view class="red-circle" @click="changeRed(item)">
                    <view class="red-red-circle r"></view>
                  </view>
                  <view class="yellow-circle" @click="changeYellow(item)">
                    <view class="yellow-yellow-circle y"></view>
                  </view>
                  <view class="blue-circle" @click="changeBlue(item)">
                    <view class="blue-blue-circle"></view>
                  </view>
                </view>
              </view>
              <!--*************换色****************-->
              <!-- <picker
                mode="date"
                :id="index"
                @change="customDataChange"
                @cancel="cancelSelect"
              >
                <view class="btn calender">
                  <image src="/static/日期.png" class="calender" />
                </view>
              </picker>
              <picker
                mode="time"
                :id="index"
                @change="customTimeChange"
                @cancel="cancelSelect"
              > -->
              <view class="btn time">
                <uni-datetime-picker
                  type="datetime"
                  v-model="item.dad"
                  class="time-picker"
                  @change="(e) => timePut(e, item)"
                >
                  <image src="/static/time.png" alt="" class="time" />
                </uni-datetime-picker>
              </view>
              <!-- </picker> -->
              <view class="btn delete">
                <image
                  src="/static/close.png"
                  class="delete"
                  @click="isDelete(item, index)"
                />
              </view>
            </view>
          </view>
        </li>
      </ul>
    </view>
    <!--*************黄色事件****************-->
    <!--*************蓝色事件****************-->
    <view class="list">
      <ul>
        <li
          class="li_vessel"
          v-for="(item, index) in lists"
          v-show="item.ispriority == 8"
          :key="index"
        >
          <view class="sum">
            <view
              class="lists blue"
              :id="index"
              :style="{
                transform:
                  item.ifLeft == true
                    ? 'translateX(-260rpx)'
                    : 'translateX(0rpx)',
              }"
              ref="listItems"
              @touchstart="touchStart"
              @touchend="touchEnd"
            >
              <view class="big-circle">
                <view
                  class="little-circle"
                  @click="changeReady(item)"
                  :style="litcircle"
                >
                </view>
              </view>
              <view class="item" @longpress="pressEdit(item, index)">
                {{ item.text }}
              </view>
              <view class="time-data">
                {{ item.dad }}
              </view>
            </view>
            <!--*************编辑弹窗****************-->
            <modal
              v-if="ifnum == index"
              title="编辑事项"
              confirm-text="确定"
              cancel-text="取消"
              @cancel="cancelEdit(item)"
              @confirm="confirmEdit(item)"
            >
              <input
                type="text"
                placeholder="修改内容..."
                v-model="item.text"
              />
            </modal>
            <!--*************编辑弹窗****************-->
            <!--*************换色****************-->
            <view class="btn-box">
              <view class="changeco">
                <view class="btn color blue" @click="ifChangeshow(item)">
                  <view class="smallcolor"></view>
                </view>
                <view class="white-circle" v-if="item.ifChange">
                  <view class="red-circle" @click="changeRed(item)">
                    <view class="red-red-circle r"></view>
                  </view>
                  <view class="yellow-circle" @click="changeYellow(item)">
                    <view class="yellow-yellow-circle"></view>
                  </view>
                  <view class="blue-circle" @click="changeBlue(item)">
                    <view class="blue-blue-circle b"></view>
                  </view>
                </view>
              </view>
              <!--*************换色****************-->
              <!-- <picker
                mode="date"
                :id="index"
                @change="customDataChange"
                @cancel="cancelSelect"
              >
                <view class="btn calender">
                  <image src="/static/日期.png" class="calender" />
                </view>
              </picker>
              <picker
                mode="time"
                :id="index"
                @change="customTimeChange"
                @cancel="cancelSelect"
              > -->
              <view class="btn time">
                <uni-datetime-picker
                  type="datetime"
                  v-model="item.dad"
                  class="time-picker"
                  @change="(e) => timePut(e, item)"
                >
                  <image src="/static/time.png" alt="" class="time" />
                </uni-datetime-picker>
              </view>
              <!-- </picker> -->
              <view class="btn delete">
                <image
                  src="/static/close.png"
                  class="delete"
                  @click="isDelete(item, index)"
                />
              </view>
            </view>
          </view>
        </li>
      </ul>
    </view>
    <!--*************蓝色事件****************-->
    <!--*************已完成****************-->
    <view class="list">
      <ul>
        <li
          class="li_vessel"
          v-for="(item, index) in lists"
          v-show="item.isDone == 2"
          :key="index"
        >
          <view class="sum">
            <view
              class="lists done"
              :id="index"
              :style="{
                transform:
                  item.ifLeft == true
                    ? 'translateX(-85rpx)'
                    : 'translateX(0rpx)',
              }"
              ref="listItems"
              @touchstart="touchStart"
              @touchend="touchEnd"
            >
              <view class="big-circle">
                <view
                  class="little-circle done"
                  @click="changeReady(item)"
                  :style="litcircle"
                >
                </view>
              </view>
              <view class="item done">
                {{ item.text }}
              </view>
            </view>
            <!--*************换色****************-->
            <view class="btn-box">
              <view class="btn delete">
                <image
                  src="/static/close.png"
                  class="delete"
                  @click="isDelete(item, index)"
                />
              </view>
            </view>
          </view>
        </li>
      </ul>
    </view>
    <!--*************已完成****************-->
  </view>
</template>

<script>
// import { i } from '@dcloudio/vue-cli-plugin-uni/packages/postcss/tags';
// import request2 from "@/request.js"
import MsgBox from "../../components/MsgBox/MsgBox.vue";
export default {
  components: {
    // request2,
  },
  onPullDownRefresh() {
    // uni.startPullDownRefresh();
    //下面是下拉刷新页面的相关代码
    //...

    uni.stopPullDownRefresh();
  },
  onLoad() {
    // console.log(uni.getStorageSync("showTips"));
    this.showTips = uni.getStorageSync("showTips") === "";
    //.....
    uni.request({
      url: "https://tomato.daoxuan.cc/todo/",
      data: {},
      header: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "X-Requested-With": "XMLHttpRequest",
        Authorization: "Bearer " + uni.getStorageSync("login").acc,
      },
      method: "GET",
      sslVerify: true,
      success: ({ data, statusCode, header }) => {
        // this.lists[0].text=data[0].thing;
        // console.log(data);
        // console.log(data.thing);
        console.log(data);
        if (statusCode == 200) {
          this.$refs.msgBox.showMsg(2, "加载成功");
          this.addTodoFirstLoad = false;
          console.log(data);
          this.lists = [];
          // this.lists.clear()
          for (let i = 0; i < data.length; i++) {
            this.lists.push({
              ispriority: data[i].thing_priority,
              isDone: data[i].thing_state,
              ifChange: false,
              ifLeft: false,
              // tim: data[i].time.split(" ")[1] || "",
              // dad: data[i].time.split(" ")[0] || "",

              dad:
                data[i].time == ":undefined" || data[i].time == ""
                  ? ""
                  : data[i].time,
              text: data[i].thing,
              num: data[i].id,
            });
          }
          console.log("lists", this.lists);
        }
        // item.num=data.id;
      },
      fail: (error) => {
        console.error(error);
      },
    });
  },
  data() {
    return {
      showTips: false,
      addTodoFirstLoad: true,
      lists: [],
      litcircle: "",
      showPop: false,
      contentPop: "",
      ifnum: -1,
      str: "",
      startX: 0,
      endX: 0,
      btn: "",
      contentEdit: "",
      datetimesingle: "",
      a: "",
      b: "",
    };
  },
  methods: {
    closeTips() {
      this.showTips = false;
      uni.setStorageSync("showTips", false);
    },
    //左滑
    touchStart: function (e) {
      if (e.touches.length == 1) {
        //设置触摸起始点水平方向位置
        this.startX = e.touches[0].clientX;
      }
    },
    touchEnd: function (e) {
      if (e.changedTouches.length == 1) {
        //手指移动结束后水平位置
        var endX = e.changedTouches[0].clientX;
        let diff = endX - this.startX;
        if (Math.abs(diff) > 20) {
          if (diff > 0) {
            console.log("右滑...");
            // this.initial="transform:translateX(0rpx)";
            this.lists[e.currentTarget.id].ifLeft = false;
            this.lists[e.currentTarget.id].ifChange = false;
          } else {
            console.log("左滑...");
            // this.redList = "transform:translateX(-380rpx)";
            this.lists[e.currentTarget.id].ifLeft = true;
          }
        }
      }
    },
    //新建事项
    cancelPop() {
      //取消
      this.contentPop = "";
      this.showPop = false;
    },
    confirmPop() {
      //确定
      let dat = {
        text: this.contentPop,
        ispriority: 10,
        isDone: 1,
        ifChange: false,
        ifLeft: false,
        tim: "",
        dad: "",
        // num: 1,
      };
      console.log(dat.text);
      if (dat.text == "") {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      } else {
        // this.lists.unshift(data);
        // this.contentPop = "";
        // this.showPop = false;
        uni.request({
          url: "https://tomato.daoxuan.cc/todo/thing/",
          data: {
            thing_state: dat.isDone,
            thing_priority: dat.ispriority,
            thing: dat.text,
            time: "",
          },
          header: {
            Accept: "application/json",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            Authorization: "Bearer " + uni.getStorageSync("login").acc,
          },
          method: "POST",
          sslVerify: true,
          success: ({ data, statusCode, header }) => {
            dat.num = data.id;
            this.lists.unshift(dat);
            this.contentPop = "";
            this.showPop = false;
            console.log(data);
          },
          fail: (error) => {},
        });
        uni.request({
          url: "https://tomato.daoxuan.cc/todo/",
          data: {},
          header: {
            Accept: "application/json",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            Authorization: "Bearer " + uni.getStorageSync("login").access,
          },
          method: "GET",
          sslVerify: true,
          success: ({ data, statusCode, header }) => {
            // this.lists=data;
            this.$refs.msgBox.showMsg(2, "添加成功");
            console.log(data);
          },
          fail: (error) => {},
        });
      }
    },
    //改变状态（是否完成）
    changeReady(item) {
      if (item.isDone == 1) {
        item.isDone = 2;
        item.ispriority = -1;
      } else {
        item.isDone = 1;
        item.ispriority = 10;
      }
      uni.request({
        url: "https://tomato.daoxuan.cc/update/todo/thing/",
        data: {
          thing_state: item.isDone,
          thing_priority: item.ispriority,
          thing: item.text,
          time: item.dad.split(":")[0] + ":" + item.dad.split(":")[1],
          thing_id: item.num,
        },
        header: {
          Accept: "application/json",
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
          Authorization: "Bearer " + uni.getStorageSync("login").access,
        },
        method: "POST",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          // if (item.isDone == 1) {
          //   item.isDone = 2;
          //   item.ispriority = -1;
          // } else {
          //   item.isDone = 1;
          //   item.ispriority = 10;
          // }
          console.log(data);
        },
        fail: (error) => {},
      });
      uni.request({
        url: "https://tomato.daoxuan.cc/todo/",
        data: {},
        header: {
          Accept: "application/json",
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
          Authorization: "Bearer " + uni.getStorageSync("login").acc,
        },
        method: "GET",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          // this.lists=data;
          this.$refs.msgBox.showMsg(2, "修改成功");

          console.log(data);
        },
        fail: (error) => {},
      });
    },
    showMsg(state, msg) {
      this.$refs.msgBox.showMsg(state, msg);
    },
    //删除
    isDelete(item, index) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "确认删除该项事件吗？",
        cancelText: "取消",
        confirmText: "删除",
        confirmColor: "#ff0000",
        success: function (res) {
          var that = this;
          if (res.confirm) {
            that.lists.splice(index, 1);
            uni.request({
              url: "https://tomato.daoxuan.cc/delete/todo/thing/",
              data: {
                thing_id: item.num,
              },
              header: {
                Accept: "application/json",
                "Content-Type": "application/json",
                "X-Requested-With": "XMLHttpRequest",
                Authorization: "Bearer " + uni.getStorageSync("login").acc,
              },
              method: "POST",
              sslVerify: true,
              success: ({ data, statusCode, header }) => {
                // that.lists.splice(index, 1);\
                // console.log("thisref",this.this.$refs);
                this.$refs.msgBox.showMsg(2, "删除成功");
                // this.showMsg(2,"删除成功")
                console.log(data);
              },
              fail: (error) => {},
            });
          } else {
            console.log("用户点击取消");
          }
        }.bind(this),
      });
    },
    //长按编辑
    pressEdit(item, index) {
      this.contentEdit = item.text;
      this.ifnum = index;
    },
    cancelEdit(item) {
      item.text = this.contentEdit;
      //  this.ifnum=-1;
      if (item.text == "") {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      } else {
        uni.request({
          url: "https://tomato.daoxuan.cc/update/todo/thing/",
          data: {
            thing_state: item.isDone,
            thing_priority: item.ispriority,
            thing: item.text,
            time: item.dad.split(":")[0] + ":" + item.dad.split(":")[1],
            thing_id: item.num,
          },
          header: {
            Accept: "application/json",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            Authorization: "Bearer " + uni.getStorageSync("login").access,
          },
          method: "POST",
          sslVerify: true,
          success: ({ data, statusCode, header }) => {
            this.ifnum = -1;
          },
          fail: (error) => {},
        });
      }
    },
    confirmEdit(item) {
      // this.ifnum=-1;
      if (item.text == "") {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      } else {
        uni.request({
          url: "https://tomato.daoxuan.cc/update/todo/thing/",
          data: {
            thing_state: item.isDone,
            thing_priority: item.ispriority,
            thing: item.text,
            time: item.dad.split(":")[0] + ":" + item.dad.split(":")[1] || "",
            thing_id: item.num,
          },
          header: {
            Accept: "application/json",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            Authorization: "Bearer " + uni.getStorageSync("login").access,
          },
          method: "POST",
          sslVerify: true,
          success: ({ data, statusCode, header }) => {
            this.ifnum = -1;
            this.$refs.msgBox.showMsg(2, "修改成功");
          },
          fail: (error) => {},
        });
      }
    },
    //换色
    ifChangeshow(item) {
      if (item.ifChange == false) {
        item.ifChange = true;
      } else {
        item.ifChange = false;
      }
    },
    changeRed(item) {
      item.ispriority = 10;
      item.ifChange = false;
      item.ifLeft = false;
      uni.request({
        url: "https://tomato.daoxuan.cc/update/todo/thing/",
        data: {
          thing_state: item.isDone,
          thing_priority: item.ispriority,
          thing: item.text,
          time: item.dad.split(":")[0] + ":" + item.dad.split(":")[1],
          thing_id: item.num,
        },
        header: {
          Accept: "application/json",
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
          Authorization: "Bearer " + uni.getStorageSync("login").acc,
        },
        method: "POST",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          // item.ispriority = 10;
          // item.ifChange = false;
          // item.ifLeft=false;
          console.log(data);
          this.$refs.msgBox.showMsg(2, "修改成功");
        },
        fail: (error) => {},
      });
    },
    changeYellow(item) {
      item.ispriority = 9;
      item.ifChange = false;
      item.ifLeft = false;
      uni.request({
        url: "https://tomato.daoxuan.cc/update/todo/thing/",
        data: {
          thing_state: item.isDone,
          thing_priority: item.ispriority,
          thing: item.text,
          time: item.dad.split(":")[0] + ":" + item.dad.split(":")[1],
          thing_id: item.num,
        },
        header: {
          Accept: "application/json",
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
          Authorization: "Bearer " + uni.getStorageSync("login").acc,
        },
        method: "POST",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          // item.ispriority = 9;
          // item.ifChange = false;
          // item.ifLeft=false;
          this.$refs.msgBox.showMsg(2, "修改成功");
          console.log(data);
        },
        fail: (error) => {},
      });
    },
    changeBlue(item) {
      item.ispriority = 8;
      item.ifChange = false;
      item.ifLeft = false;
      uni.request({
        url: "https://tomato.daoxuan.cc/update/todo/thing/",
        data: {
          thing_state: item.isDone,
          thing_priority: item.ispriority,
          thing: item.text,
          time: item.dad.split(":")[0] + ":" + item.dad.split(":")[1],
          thing_id: item.num,
        },
        header: {
          Accept: "application/json",
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
          Authorization: "Bearer " + uni.getStorageSync("login").acc,
        },
        method: "POST",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          // item.ispriority = 8;
          // item.ifChange = false;
          // item.ifLeft=false;
          this.$refs.msgBox.showMsg(2, "修改成功");
          console.log(data);
        },
        fail: (error) => {},
      });
    },
    //时间设置
    timePut(e, item) {
      console.log("e", e, e.split(":")[0] + ":" + e.split(":")[1]);
      console.log(item.num);
      let timeRegExp = /(\d+)+-+(\d+)+-+(\d+)+ +(\d+)+:+(\d+)+:+(\d+)/g;
      if (uni.getStorageSync("mail") == undefined) {
      }
      if (!timeRegExp.test(e)) {
        this.$refs.msgBox.showMsg(1, "请选择日期和时间");
        return;
      }
      let date = new Date(e);
      let dateNow = new Date();
      // console.log(date);
      // console.log(dateNow);
      if (date <= dateNow) {
        this.$refs.msgBox.showMsg(1, "选择的时间已经过了");
        return;
      }
      uni.request({
        url: "https://tomato.daoxuan.cc/todo/time/",
        data: {
          time: e.split(":")[0] + ":" + e.split(":")[1],
          thing_id: item.num,
        },
        header: {
          Accept: "application/json",
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
          Authorization: "Bearer " + uni.getStorageSync("login").access,
        },
        method: "POST",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          console.log(data.time);
          if (statusCode == 200) this.$refs.msgBox.showMsg(2, "设置成功");
          if (statusCode == 403) {
            this.$refs.msgBox.showMsg(1, "请先添加邮箱");
          }
        },
        fail: (error) => {},
      });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.ddl {
  z-index: -100;
  position: fixed;
  width: 100%;
  height: 100vh;
}
.titlebox {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}
.title {
  width: 680rpx;
  display: flex;
  justify-content: space-between;
}
.slogan {
  width: 473rpx;
  height: 66rpx;
  border-radius: 33rpx;
  line-height: 66rpx;
  text-align: center;
  font-family: Dotties Chocolate;
  background-color: #facc31;
  color: white;
}
.new {
  width: 80rpx;
  height: 66rpx;
  border-radius: 33rpx;
  background-color: #facc31;
}
.new {
  display: flex;
  justify-content: center;
  align-items: center;
}
.new .plus {
  width: 50rpx;
  height: 50rpx;
}
.newedit {
  min-height: 100rpx;
  padding: 0;
}
.list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sum {
  position: relative;
  display: flex;
  align-items: center;
  width: 680rpx;
  margin-top: 20rpx;
  border-radius: 30rpx;
  background-color: #d2d2d2;
}
.lists {
  position: relative;
  /* margin-top: 10rpx; */
  z-index: 10;
  display: flex;
  align-items: center;
  width: 680rpx;
  /* height: 120rpx; */
  min-height: 115rpx;
  border-radius: 30rpx;
  transition: all 0.5s;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}
.lists.red {
  background-color: #f75c5c;
}
.lists.yellow {
  background-color: #facc31;
}
.lists.blue {
  background-color: #007aff;
}
.lists.done {
  background-color: #e5e5e5;
  color: #bfbfbf;
  text-decoration: line-through;
}
.time-data {
  position: absolute;
  top: 2rpx;
  right: 18rpx;
  font-size: 20rpx;
  font-family: Smiley Sans;
  color: white;
}
.big-circle {
  position: absolute;
  left: 20rpx;
  top: 37rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-left: 30rpx;
  margin-right: 20rpx;
  margin-top: 20rpx; */
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: #bfbfbf;
}
.little-circle {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  background-color: white;
}
.little-circle.done {
  background-color: #707070;
}
.item {
  /* line-height: 120rpx; */
  /* font-family: Smiley Sans; */
  min-height: 20rpx;
  padding: 20rpx 10rpx 20rpx 80rpx;
  color: white;
  text-decoration: underline;
  text-underline-offset: 5rpx;
}
.item.done {
  color: #bfbfbf;
  text-decoration:none;
}
.inputtext {
  width: 580rpx;
  color: white;
  padding-top: 23rpx;
  padding-left: 80rpx;
  padding-bottom: 20rpx;
}
.btn-box {
  /* position: relative; */
  position: absolute;
  /* top: 0%; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 680rpx;
  /* height: 120rpx; */
  border-radius: 30rpx;
  background-color: #d2d2d2;
}
.changeco {
  position: relative;
}
.color {
  margin-right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65rpx;
  height: 65rpx;
  border-radius: 50%;
  background-color: #f75c5c;
}
.color.yellow {
  background-color: #facc31;
}
.color.blue {
  background-color: #007aff;
}
.smallcolor {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  background-color: white;
}
.calender {
  margin-right: 10rpx;
  width: 80rpx;
  height: 80rpx;
}
.time {
  margin-right: 10rpx;
  width: 70rpx;
  height: 70rpx;
}
.time-picker {
  width: 70rpx;
  height: 70rpx;
}
.delete {
  margin-right: 10rpx;
  width: 70rpx;
  height: 70rpx;
}
.white-circle {
  position: absolute;
  left: -110rpx;
  bottom: -90rpx;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 300rpx;
  height: 80rpx;
  border-radius: 20rpx;
  background-color: rgb(189, 187, 187);
}
.white-circle .jian{
  position:absolute;
  bottom:70rpx;
  width: 20rpx;
  height: 20rpx;
  background-color: rgb(189, 187, 187);
  transform: rotate(45deg);
}
.red-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f75c5c;
}
.red-red-circle {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  background-color: white;
}
.red-red-circle.r {
  background-color: #f75c5c;
}
.yellow-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #facc31;
}
.yellow-yellow-circle {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  background-color: #facc31;
}
.yellow-yellow-circle.y {
  background-color: white;
}
.blue-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #007aff;
}
.blue-blue-circle {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  background-color: #007aff;
}
.blue-blue-circle.b {
  background-color: white;
}
.tips {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.6);
}
.tips image {
  width: 100%;
  height: 100%;
}
.tips button {
  margin-left: 50%;
  transform: translateX(-50%);
  position: fixed;
  bottom: 100rpx;
  background-color: transparent;
  color: white;
  border: white solid 1px;
}
.tips button:hover {
  background-color: #ffffff82;
}
.addTodo {
  width: 70%;
}
</style>